<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <!--/*@thymesVar id="fileName" type=""*/-->
    <title th:text="${fileName}">
    </title>
    <style type="text/css">
        .head{
            height: 62px;
            position: relative;
            background: #eff4f8;
            line-height: 62px;
            border-bottom: 1px solid #d2dde6
        }
        .head_logo{
            font-size: 18px;
            margin-left: 20px;
            float: left;
        }
        .content{
            width:80%;
            background-color: white;
            height:650px;
            float: left;
        }
        .user{
            float: left;
            background-color: #dde4e55c;
            width:20%;
            height: 650px;
        }
        .item_content{
            margin:0 auto;
            background-color: #eff4f8;
            width:740px;
            height: 400px;
            margin-top: 20px;
        }
        .item_header{
            border-bottom: 1px solid #f1f5fb;
            height: 80px;
            /*line-height: 30px*/
            line-height: 30px;
            margin-left: 20px;
        }
        .head_file_img{
            background-image: url('../image/file.png');
            background-size: 20px 20px;
            width: 20px;
            height: 20px;
            float: left;
            margin-top: 5px;
            margin-right: 8px;
        }
        .im_file{
            background-image: url('../image/file.png');
            background-size: 50px 50px;
            width: 50px;
            height: 50px;
        }
        .download_button{
            cursor: pointer;
            background-color: #4E97FF;
            text-align: center;
            color: white;
            border-radius: 4px;
            height: 32px;
            width: 78px;
            line-height: 32px;
            border: 1px solid #3b8cff;
            display: inline-block;
        }
        .file_img_content{
            text-align: center;
            position: relative;
            align-items: center;
            top: 46%;
            display: flex;
            justify-content: center;
        }
        .avalar_image{
            margin-left: 5px;
            width: 50px;
            height: 50px;
            display: block;
            border-radius: 100px;
            border: 3px solid #d9e2ea;
        }

    </style>
</head>
<body style="background-color: #EDF1F5">
<div class="head">
    <span class="head_logo">这里应该有个logo</span>
</div>
<div style="margin-top: 20px;">
    <div class="content">
        <div class="item_header">
            <div style="margin-top: 20px">
                <div style="float: left;">
                    <div class="head_file_img"></div>
                    <!--/*@thymesVar id="fileName" type=""*/-->
                    <div style="float: left;">
                        <span th:text="${fileName}"></span>
                    </div>
                </div>
                <div style="float: right;margin-right: 20px">
                    <!--/*@thymesVar id="fileUrl" type=""*/-->
                    <a class="download_button" th:href="${fileUrl}" download="下载">下载</a>
                </div>
            </div>
            <div style="clear: both;">
                <span style="margin-left: 10px">创建时间:</span>
                <!--/*@thymesVar id="createTime" type=""*/-->
                <span th:text="${createTime}"></span>
                <span style="margin-left: 20px">失效时间:</span>
                <!--/*@thymesVar id="timeLimit" type=""*/-->
                <span th:text="${timeLimit} ? ${timeLimit} : '永久有效'"></span>
                <span style="margin-left: 20px">剩余查看次数:</span>
                <!--/*@thymesVar id="countLimit" type=""*/-->
                <span th:text="${countLimit} ? ${countLimit} : '永久有效'"></span>
                <!--永久有效-->
            </div>
        </div>
        <div class="item_content">
            <div class="file_img_content" style="text-align: center; position: relative;top: 46%">
                <div class="im_file"></div>
                <div>
                    <span>文件大小:</span>
                    <!--/*@thymesVar id="fileSize" type=""*/-->
                    <span th:text="${fileSize}"></span>
                </div>
            </div>
        </div>
    </div>
    <div class="user">
        <div style="text-align: center;padding: 15px;color: #6a7281;font-size: 14px">
            <div style="margin-top: 20px">
                <div style="float: left;">
                    <!--/*@thymesVar id="userHead" type=""*/-->
                    <img class="avalar_image" th:src="${userHead}" alt="">
                </div>
                <div style="float: left;line-height: 56px;">
                    <!--/*@thymesVar id="userName" type=""*/-->
                    &nbsp;&nbsp;&nbsp;
                    <span th:text="${userName}"></span>
                </div>
            </div>
            <div style="position: relative;top: 20px;text-align: left; clear: both;margin-top: 20px">
                <!--/*@thymesVar id="userDescription" type=""*/-->
                说明:&nbsp;&nbsp;<span th:text="${userDescription}"></span>
            </div>
        </div>
        <div style="width: 100px; height: 100px; background-color: yellow;margin-top: 20px;margin-left: 30%">
            这块给点推广
        </div>
    </div>
</div>
</body>
<script>
    function myDownload(){
        console.log('download!!')
    }
</script>
</html>